<template>
  <div class="login">
    <img src="../../../public/img/login/logo.png" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名(随便填写)"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="btn-div">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts">
import { Button, Field, Form } from "vant";
import { Component, Vue } from "vue-property-decorator";
import "@/assets/mock/user/login.js";
import { State, Action, Mutation } from "vuex-class";
@Component({
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Form.name]: Form
  }
})
export default class Login extends Vue {
  username: string = "";
  password: string = "123456";
  $router: any;
  @Action("user/login") login: any;
  public onSubmit(values: object) {
    this.$toast.loading({
      forbidClick: true,
      onOpened: () => {
        this.login(values).then(() => {
          this.$toast.success({
            message: "登录成功",
            forbidClick: true,
            onClose: () => {
              this.$router.push("/");
            }
          });
        });
      }
    });
  }
}
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .van-cell:not(:last-child)::after {
    border-bottom: 1px solid #a0a0a0;
  }
  .van-field__control::placeholder {
    color: #969799;
  }
  .btn-div {
    margin: 0.3rem;
  }
}
</style>
